<!-- eslint-disable vue/html-closing-bracket-newline -->
<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- el-card: 带了box-shadow效果的div -->
      <el-card class="tree-card">
        <!-- 公司信息 -->
        <!-- 用了一个行列布局 -->
        <tree-tool :item="company" @add-dept="handleShowAddDialog" />
        <!-- 树形结构 -->
        <!-- 组织架构---部门信息 -->
        <!-- default-expand-all:默认展开 -->
        <el-tree :data="treeData" :props="{ lable: 'name' }" default-expand-all>
          <!--
        插槽:
            作用: 解决组件内标签不确定的问题
            分类:
              1. 匿名插槽: 组件内只有一处标签不确定
                 (1) 先在组件内标签不确定位置用<slot></slot>占位
                 (2) 把组件写成双标签，在双标签之间镇入需要分发的标签结构
              2，具名插槽:组件内有两处及以上标签不确定
                 (1)
                 (2)
              3，作用域插槽:不仅可以给组件分发标签，还可以用到组件内部的数据
           -->
          <template #default="{ data }">
            <tree-tool
              :item="data"
              @del-dept="handleDelDept"
              @add-dept="handleShowAddDialog"
              @edit-dept="handleShowEditDialog"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 新增部门 -->
      <add-dept
        :show-dialog.sync="dialogVisible"
        :dept-list="deptList"
        :dept-item="managerDept"
        @add-dept-success="getDeptList"
      />
      <!-- 部门编辑 -->
      <edit-dept
        :show-dialog.sync="editDiptVisible"
        :dept-list="deptList"
        :dept-item="managerDept"
        @edit-dept-success="getDeptList"
      />
    </div>
  </div>
</template>

<script>
import { getDeptListAPI, delDeptAPI } from '@/api/departments'

// 部门列表转为树形结构思路:
// 1.如果pid为空，说明当前部门是一级部门
// 2.如果pid不为空，判断谁的id与当前部门的pid全等，如果全等
//    说明当前id的这个部门是pid部门的爹，要给爹这个添加孩子
import { list2Tree } from '@/utils/list2tree'
// 导入组件
import treeTool from './components/tree-tool.vue'
import AddDept from './components/add-dept.vue'
import EditDept from './components/edit-dept.vue'
// 注意: 对于树形结果的处理、常用手段就是函数的递归
export default {
  name: 'Departments',
  // 组件注册
  components: { treeTool, AddDept, EditDept },
  data() {
    return {
      // 部门列表
      deptList: [],
      // 部门树形图
      treeData: [],
      // 公司信息
      company: {
        name: '',
        manager: '',
        id: ''
      },
      // 控制添加弹框的显示
      dialogVisible: false,
      editDiptVisible: false,
      // 记录当前操作的部门
      managerDept: {},
      // 加载状态
      loading: false
    }
  },
  created() {
    this.getDeptList()
  },
  methods: {
    // 获取部门列表
    async getDeptList() {
      this.loading = true
      // 调接口发请求
      const resp = await getDeptListAPI()
      const { data } = resp
      this.company.name = data.companyName
      this.company.id = data.companyId
      this.company.manager = data.companyManage
      // console.log(resp)
      this.treeData = list2Tree(data.depts, '')
      this.deptList = data.depts
      this.loading = false
    },
    // 删除部门
    async handleDelDept(id) {
      try {
        // 询问：
        await this.$confirm('确定删除该部门吗？', '温馨提示：此操作不可逆', {
          type: 'warning',
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        })
        // 1.确定
        // 1.1发请求
        await delDeptAPI(id)
        // 1.2重新获取部门列表
        this.getDeptList()
        // 1.3删除成功提示
        this.$message.success('删除成功')
      } catch (error) {
        // 3.删除失败提示
        this.$message.error(error.message)
        // console.log(error)
      }
    },
    // 显示添加部门
    async handleShowAddDialog(dept) {
      this.dialogVisible = true
      this.managerDept = dept
    },
    // 显示编辑部门
    async handleShowEditDialog(dept) {
      this.editDiptVisible = true
      this.managerDept = dept
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url('~@/assets/common/add-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url('~@/assets/common/minus-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url('~@/assets/common/user-filling.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
